import Vue from 'vue'
import VueRouter from 'vue-router'

// 导入页面组件 -- 在脚手架里，如果是js文件可以省略.js，如果是vue文件可以省略.vue
import MyDiscover from '@/views/MyDiscover'
import MyMine from '@/views/MyMine'
import MyFriend from '@/views/MyFriend'
import NotFound from '@/views/NotFound'
// 导入子路由
import TuiJian from '@/views/TuiJian'
import TopList from '@/views/TopList'
import GeDan from '@/views/GeDan'

Vue.use(VueRouter)

const routes = [

  // 这条规则的意思是，如果你访问的是 /discover，它会自动跳转到 /discover/tuijian
  { path: '/discover', redirect: '/discover/tuijian' },
  // 一条规则是一个对象,有三个基本属性
  // name: 路由的名字
  // path: 对应的路径
  // component: 对应的组件
  { 
    name: 'MyDiscover', 
    path: '/discover', 
    component: MyDiscover,
    // 放子路由的地方
    children: [
      // 子路由的路径前面不要加`/`，其实是可以加 `/`
      // 区别在于： 加 `/` 代表直接路径上就写 /tuijian  前面不用拼接父路由路径
      // 不加 `/` 就代表访问时要拼接父路由的路径
      { name: 'TuiJian', path: 'tuijian', component: TuiJian },
      { name: 'TopList', path: 'toplist', component: TopList },
      { name: 'GeDan', path: 'gedan', component: GeDan },
    ] 
  },
  { name: 'MyMine', path: '/my', component: MyMine },
  { name: 'MyFriend', path: '/friend', component: MyFriend },

  // 我需要除了上面三个路径以外的所有路径 - 404页面一定要放在路由规则的最后面
  // 后面我们的项目叫使用标准规范的项目里，如果不放到最后会报错
  { name: 'NotFound', path: '*', component: NotFound },
]

const router = new VueRouter({
  routes
})

export default router
